<template>
    <view class="content">
        <view class="user-BG">
            <view class="user">
                <image class="user-avatar" src="../../static/img/new.png" mode=""></image>
                <view class="user-info">
                    <view class="user-name">
                        <view class="">王美丽</view>
                        <image src="@/static/fimg/my/recognize.png" mode=""></image>
                    </view>
                    <view class="user-recognize">已实名</view>
                </view>
            </view>
        </view>
        <view class="card">
            <view class="card-flex">
                <view class="card-flex card-title">
                    <image src="@/static/fimg/my/money.png" mode=""></image>
                    <view class="">我的钱包</view>
                </view>
                <view class="Payment">对公打款</view>
            </view>
            <view class="Recharge">充值的广告费</view>
            <view class="card-flex">
                <view class="money">200.00</view>
                <view class="RechargePush">在线充值</view>
            </view>
        </view>
        <view class="cardTow">
            <view class="card-flex">
                <view class="card-flex card-title">
                    <image src="@/static/fimg/my/money.png" mode=""></image>
                    <view class="">我的收益</view>
                </view>
            </view>
            <view class="card-flex top">
                <view class="money">200.00</view>
                <view class="RechargePush">体现</view>
            </view>
        </view>
        <view class="dataBoard">
            <view class="dataBoard-title">数据看板</view>
            <view class="dataBoardCard">
                <view class="dataBoardItem">
                    <view class="dataBoardItemNum">50</view>
                    <view class="">我的接单量</view>
                </view>
                <view class="dataBoardItem">
                    <view class="dataBoardItemNum">50</view>
                    <view class="">我的发布量</view>
                </view>
                <view class="dataBoardItem">
                    <view class="dataBoardItemNum">50</view>
                    <view class="">近期沟通量</view>
                </view>
            </view>
        </view>
        <view class="nav" v-for="(item,index) in navlist" :key="index">
            <view class="nav-le">
                <image :src="item.image" mode=""></image>
                <view class="">{{item.name}}</view>
            </view>
            <image class="nav-right" src="@/static/fimg/my/my-right.png" mode=""></image>
        </view>
        <view class="" @click="logout">退出登录</view>
        <!-- <view class="card"></view> -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                navlist: [{
                        image: "../../static/fimg/my/nav1.png",
                        name: "我的收藏",
                        navgo: ""
                    },
                    {
                        image: "../../static/fimg/my/nav2.png",
                        name: "我的关注",
                        navgo: ""
                    },
                    {
                        image: "../../static/fimg/my/nav3.png",
                        name: "我的推广",
                        navgo: ""
                    },
                    {
                        image: "../../static/fimg/my/nav4.png",
                        name: "企业认证",
                        navgo: ""
                    },
                    {
                        image: "../../static/fimg/my/nav5.png",
                        name: "开票信息",
                        navgo: ""
                    },
                    {
                        image: "../../static/fimg/my/nav6.png",
                        name: "充值记录",
                        navgo: ""
                    },
                    {
                        image: "../../static/fimg/my/nav7.png",
                        name: "皮肤",
                        navgo: ""
                    },
                ]
            }
        },
        methods: {
            logout() {
                uni.showModal({
                    title: '提示',
                    content: '确定要退出吗？',
                    showCancel: true,
                    cancelText: '取消',
                    confirmText: '确定',
                    success: res => {
                        if (res.confirm) {
                            this.$socket.send({
                                type: 'logout',
                                token: uni.getStorageSync('access_token'),

                            });
                            uni.removeStorageSync('access_token');
                            uni.removeStorageSync('userInfo');
                            this.$action.quitcid();
                            //this.$store.commit('chat/clear')
                            //	this.$jump('game.index')
                            uni.reLaunch({
                                url: '/pages/login/index'
                            })
                        }
                    }
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .content {
        background: #F2F3F7;
        padding-bottom: 15rpx;
    }

    .user-BG {
        background: linear-gradient(180deg, #FF7B1E 0%, #F2F2F5 90%, #F2F3F7 100%);
        border-radius: 0px 0px 0px 0px;
        height: 350rpx;

        .user {
            display: flex;
            align-items: center;
            padding: 46rpx 28rpx 46rpx 46rpx;

            .user-avatar {
                width: 120rpx;
                height: 120rpx;
                border-radius: 50%;
                margin-right: 36rpx;
            }

            .user-info {
                flex: 1;

                .user-name {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    color: #333333;
                    font-size: 32rpx;
                    font-weight: 600;

                    >image {
                        width: 45rpx;
                        height: 36rpx;
                    }
                }

                .user-recognize {
                    width: 86rpx;
                    text-align: center;
                    border-radius: 9px 9px 9px 9px;
                    border: 1px solid #FB5320;
                    font-size: 20rpx;
                    line-height: 24rpx;
                    color: #FB5320;
                    margin-top: 20rpx;
                }
            }
        }
    }

    .card {
        padding: 32rpx 64rpx;
        background: #FFB07B;
        box-shadow: 0px 3px 10px 1px rgba(23, 86, 204, 0.37);
        border-radius: 10px 10px 10px 10px;
        margin: -100rpx 20rpx 20rpx 20rpx;
    }

    .card-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-title {
        font-size: 36rpx;
        color: white;
        font-weight: 800;

        >image {
            width: 36rpx;
            height: 36rpx;
            margin-right: 10rpx;
        }
    }

    .Payment {
        padding: 4rpx 12rpx;
        background-color: rgba(255, 255, 255, 0);
        color: white;
        font-size: 24rpx;
        box-shadow: 0px 0px 10px 1px rgba(23, 86, 204, 0.12);
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #FFFFFF;
    }

    .Recharge {
        font-weight: 400;
        font-size: 28rpx;
        line-height: 28rpx;
        color: #666666;
        margin: 30rpx 0;
    }

    .money {
        font-weight: bold;
        font-size: 46rpx;
        color: #FFFFFF;
    }

    .RechargePush {
        width: 126rpx;
        height: 45rpx;
        line-height: 45rpx;
        text-align: center;
        background: #FFFFFF;
        box-shadow: 0px 0px 10px 1px rgba(23, 86, 204, 0.12);
        border-radius: 12rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #FB5E30;
    }

    .cardTow {
        padding: 32rpx 64rpx;
        background: #FFB07B;
        box-shadow: 0px 3px 10px 1px rgba(23, 86, 204, 0.37);
        border-radius: 10px 10px 10px 10px;
        margin: 20rpx 20rpx 20rpx 20rpx;

    }

    .top {
        margin-top: 30rpx;
    }

    .dataBoard {
        margin: 20rpx;

        .dataBoard-title {
            color: #666666;
            font-size: 32rpx;
        }

        .dataBoardCard {
            background-color: white;
            border-radius: 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 32rpx 0;
            margin: 10rpx 0;

            .dataBoardItem {
                text-align: center;
                color: #333333;
                font-size: 28rpx;

                .dataBoardItemNum {
                    font-size: 40rpx;
                    color: #FB5320;
                    margin-bottom: 20rpx;
                }
            }
        }
    }

    .nav {
        padding: 16rpx 28rpx;
        margin: 10rpx 20rpx;
        background-color: white;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .nav-le {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            color: #333333;

            >image {
                width: 48rpx;
                height: 48rpx;
                margin-right: 10rpx;

            }
        }

        .nav-right {
            width: 16rpx;
            height: 32rpx;
        }
    }
</style>